<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<!DOCTYPE html>
<html lang="en">
  <head>
  	<base href=" <%=basePath%>"> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>比电影</title>
	
	<!-- 网页图标 -->  
	<link rel="icon" href="images/favicon.ico" type="image/x-icon" />  
	<link rel="SHORTCUT ICON" href="images/favicon.ico" />
	
    <!-- Bootstrap core CSS -->
   	<link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.default.css" rel="stylesheet">
  </head>

  <body>
    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index">BI Dianying</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class=""><a href="index">首页</a></li>
            <li class="active"><a>比价格</a></li>
            <li><a>热门活动</a></li>
            <li><a>经典影评</a></li>
          </ul>
          <ul class="nav navbar-nav" style="float: right;">
            <li ><a href='tencent://message/?uin=516511915'>联系作者</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

    <div class="container">
      <div class="row">
        <div class="jumbotron">
          	<div class="row" style="margin-bottom: 15px;" id="date_choose">
          		<c:forEach items="${dateInfo}" var="dateInfo">
          			<div class="btn btn-default" id="${ dateInfo.id}">${dateInfo.text}</div>
          		</c:forEach>
          		<input type="hidden" value="${palyDate }" id="playDate"/>
          		<input type="hidden" value="${movieId }" id="movieId"/>
 			</div>
 			<div class="row" style="background: #dfdfdf;">
          		<div class="col-md-1" style="text-align: center;"><span>地区</span></div>
          		<div class="col-md-4" style="text-align: center;"><span>影院</span></div>
          		<div class="col-md-7">
          			<div class="col-md-2" style="padding:0"><span>放映时间</span></div>
          			<div class="col-md-2" style="padding:0"><span>语言版本</span></div>
          			<div class="col-md-2" style="padding:0"><span>放映厅</span></div>
          			<div class="col-md-2"><span>格瓦拉</span></div>
          			<div class="col-md-2"><span>卖座网</span></div>
          			<div class="col-md-2"><span>淘宝电影</span></div>
          		</div>
 			</div>
 			<div class="row movie-choose">
 				<div class="col-md-2" style="height: 615px; max-height: 500px; min-height: 500px ;  background: #fbfbfb;  overflow-y: auto;">
 					<ul class="nav nav-pills nav-stacked" id="area_choose">
 						<c:forEach items="${areaInfo.areaMapList}" var="areaMap">
 							<li role="presentation" class="">
 							<a id="${ areaMap.areaId}" href="javascript:void(0);">${areaMap.areaValue}</a></li>
          				</c:forEach>
					</ul>
 				</div>
 				<div class="col-md-3" style="height: 615px; max-height: 500px; min-height: 500px;background: #fbfbfb;  overflow-y: auto;">
 					<ul class="nav nav-pills nav-stacked" id="cinema_choose">
 						<c:forEach items="${areaInfo.areaCinemaMapList}" var="areaCinemaMap">
 							<li role="presentation" cid="${areaCinemaMap.cinemaId }" rel="${areaCinemaMap.areaId }" class="">
 							<a href="javascript:void(0);"><p class="cinema_no_choose" style="font-size: 16px;margin-bottom: 5px;">${areaCinemaMap.cinemaName}</p><p class="address" style="  font-size: 12px;margin-bottom: 5px; ">${areaCinemaMap.address }</p></a></li>
          				</c:forEach>
					</ul>
          		</div>
 				<div class="col-md-7 mod_chooseOpi" style="height: 615px; max-height: 500px; min-height: 500px;background: #fbfbfb;  overflow-y: auto;">
 					<div class="" id="price_choose" style="padding-top: 10px;">
					</div>
 					
 				</div>
 			</div>
        </div>
      </div><!--/row-->

      <hr>


    </div><!--/.container-->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="js/custom/bootstrap-districtpicker.js"></script>
    <script src="js/custom/cookie.js"></script>
    
    
	<script type="text/javascript">
	$("#area_choose").find("a").click(function(){
		$(this).parents("ul").find("li").removeClass("active");
		$(this).parent().addClass("active");
		var areaId = $(this).attr("id");
		$("#cinema_choose").find("li").hide();
		$("#cinema_choose").find("li").each(function(){
			if($(this).attr("rel")==areaId){
				$(this).show();
			}
		});
		if(areaId=='countyCodeAll'){
			$("#cinema_choose").find("li").show();
		}
		
	});
	$("#cinema_choose").find("a").click(function(){
		$(this).parents("ul").find("li").removeClass("active");
		$(this).parent().addClass("active");
		var fyrq = $("#date_choose").find(".btn-info").attr("id");
		var cinemaId = $(this).parent().attr("cid");
		var movieId = $("#movieId").val();
		$.ajax( {    
		    url:'movie/getCommonOpiItem',// 跳转到 action    
		    data:{    
		    	fyrq : fyrq,    
		    	cinemaId : cinemaId,    
		    	movieId : movieId   
		    },    
		    type:'post',    
		    dataType:'json',    
		    success:function(data) {  
		    	if(data.status==0){
		    		$("#price_choose").empty();
		    		var data = data.data;
		    		$.each(data,function(i,v){
		    			$("#price_choose").append("<div class='row' style='  border-bottom: 1px dotted #dcdcdc;' id='"+v.hd+"'>"
		    										+"<div class='col-md-2'>"
	    											+"<p style='color: #444;font-size: 16px;margin-bottom: 5px;'>"+v.hd+"</p>"
	    											+"<p style='color: #999;font-size: 11px;'>"+v.bd+"</p>"
	    											+"</div>"
	    											+"<div class='col-md-2'>"
	    											+"<p style='color: #444;font-size: 16px;margin-bottom: 5px;'>"+v.opiEdition+"</p>"
	    											+"<em class='ui_movieType_w'><span class='"+v.ui_movieType_w+"'></span>"+v.ui_movieType_w_text+"</em>"
	    											+"</div><div class='col-md-2' style='padding:0'>"
	    											+"<p style='color: #444;font-size: 16px;  margin-top: 10px;'>"+v.opiRoom+"</p>"
	    											+"</div><div class='col-md-2 gewara'></div><div class='col-md-2 maizuo'></div><div class='col-md-2 taobao'></div></div>");
		    		});
				rendPrice(fyrq,cinemaId,movieId);
		    	}else{
		    		alert("暂无数据！");
		    		$("#price_choose").empty();
		    	}
		    	
		     },    
		     error : function() {    
		    	 alert("暂无数据！");
		    	 $("#price_choose").empty();
		     }    
		});  
	});
	function rendPrice(fyrq,cinemaId,movieId){
		rendGewarPrice(fyrq,cinemaId,movieId);
		rendMaizuoPrice(fyrq,cinemaId,movieId);
		rendTaobaoPrice(fyrq,cinemaId,movieId);
	}
	function rendGewarPrice(fyrq,cinemaId,movieId){
		$.ajax( {    
		    url:'movie/getPriceHref',// 跳转到 action    
		    data:{    
		    	fyrq : fyrq,    
		    	cinemaId : cinemaId,    
		    	movieId : movieId   
		    },    
		    type:'post',    
		    dataType:'json',    
		    success:function(data) {  
		    	if(data.status==0){
		    		var data = data.data;
		    		$("#price_choose").find(".row").each(function(){
		    			var id = $(this).attr("id");
		    			if(data.hasOwnProperty(id)){
		    				$(this).find(".gewara").append("<p style='color: #444;font-size: 16px;margin-bottom: 5px;'>"+data[id]["opiPrice"]+"<span style='font-size: 14px;'>&nbsp;元</span></p><a style='font-size: 11px;' href='"+data[id]["href"]+"'  target='_blank'>购票链接</a>");
		    				//$(this).append("<div class='col-md-2'></div>");
		    			}
		    		});
		    	}
		     },    
		     error : function() {    
		    	 alert("暂无数据！");
		     }    
		});
	}
	function rendMaizuoPrice(fyrq,cinemaId,movieId){
		$.ajax( {    
		    url:'movie/getPriceHrefForMaizuo',// 跳转到 action    
		    data:{    
		    	fyrq : fyrq,    
		    	cinemaId : cinemaId,    
		    	movieId : movieId   
		    },    
		    type:'post',    
		    dataType:'json',    
		    success:function(data) {  
		    	if(data.status==0){
		    		var data = data.data;
		    		$("#price_choose").find(".row").each(function(){
		    			var id = $(this).attr("id");
		    			if(data.hasOwnProperty(id)){
		    				$(this).find(".maizuo").append("<p style='color: #444;font-size: 16px;margin-bottom: 5px;'>"+data[id]["opiPrice"]+"<span style='font-size: 14px;'>&nbsp;元</span></p><a style='font-size: 11px;' href='"+data[id]["href"]+"'  target='_blank'>购票链接</a>");
		    			}
		    			
		    		});
		    	}
		     },    
		     error : function() {    
		     }    
		});
	}
	function rendTaobaoPrice(fyrq,cinemaId,movieId){
		$.ajax( {    
		    url:'movie/getPriceHrefForTaobao',// 跳转到 action    
		    data:{    
		    	fyrq : fyrq,    
		    	cinemaId : cinemaId,    
		    	movieId : movieId   
		    },    
		    type:'post',    
		    dataType:'json',    
		    success:function(data) {  
		    	if(data.status==0){
		    		var data = data.data;
		    		$("#price_choose").find(".row").each(function(){
		    			var id = $(this).attr("id");
		    			if(data.hasOwnProperty(id)){
		    				$(this).find(".taobao").append("<p style='color: #444;font-size: 16px;margin-bottom: 5px;'>"+data[id]["opiPrice"]+"<span style='font-size: 14px;'>&nbsp;元</span></p><a style='font-size: 11px;' href='"+data[id]["href"]+"'  target='_blank'>购票链接</a>");
		    				//$(this).append("<div class='col-md-2'><p style='color: #444;font-size: 16px;margin-bottom: 5px;'>"+data[id]["opiPrice"]+"<span style='font-size: 14px;'>&nbsp;元</span></p><a style='font-size: 11px;' href='"+data[id]["href"]+"'  target='_blank'>购票链接</a></div>");
		    			}
		    			
		    		});
		    	}
		     },    
		     error : function() {    
		     }    
		});
	}
	$("#date_choose").find("div").click(function(){
		$("#date_choose").find("div").removeClass("btn-info");
		$(this).addClass("btn-info");
		window.location.href="movie/"+$("#movieId").val()+"?palyDate="+$(this).attr("id");
	});
	$(function() {
		var palyDate = $("#playDate").val();
		if(palyDate ==''){
			$("#date_choose").find("div").first().addClass("btn-info");
		}else{
			$("#"+palyDate).addClass("btn-info");
		}
		
	});
	</script>
  </body>
</html>
